<template>
	<scroll-view scroll-y="true" class="content">
		<view class="header">
			<image :src="data.img" class="background" mode="widthFix"></image>
			<image src="../../static/guided_icon_back_page@2x.png" @click="next()" class="btn_pre"></image>
			<image :src="start?playIconList[1]:playIconList[0]" @click="playClick(start)" class="btn-start"></image>
			<image src="../../static/guided_icon_advancing_page@2x.png" @click="next()" class="btn_next"></image>
			<video hidden id="myVideoXu" :src="data.audio" class="hidden" @timeupdate="timeupdate" ref="video"
				@loadedmetadata="loadedmetadata"></video>

			<view class="line" :style="cssProps"></view>
		</view>
		<view class="detail">
			<view class="title">
				{{data.title}}
			</view>
			<rich-text :nodes="data.html"></rich-text>
		</view>
	</scroll-view>
</template>

<script>
	import HTMLParser from '../../js_sdk/parse-html/html-parser.js'
	import {
		calcTimer
	} from '../../js_sdk/utils.js'
	import {
		doGet
	} from '../../js_sdk/request-helper.js'
	export default {
		data() {
			return {
				playshow: true, //播放的图片
				stipshow: false, //暂停的图片
				lock: false, // 锁
				status: 1, // 1暂停 2播放
				currentTime: 0, //当前进度
				duration: 100, // 总进度
				videoContext: '',
				url: 'http://101.132.195.31/8088/file/1631499531122_5814.mp3',


				img: '../../static/total_img_banner@2x.png',
				start: false,
				playIconList: [
					'../../static/guided_icon_Play@2x.png',
					'../../static/guided_icon_closure@2x.png'
				],
				percent: '0%',

				data: {
					audio: ''
				},
			}
		},
		onLoad(options) {
			this.videoContext = uni.createVideoContext('myVideoXu')
			this.getOne(options.id)
		},
		methods: {
			parse(str) {
				let list = new HTMLParser(str)
				return list
			},
			getOne(id) {
				doGet('/blade-museum/expl/getOne?id=' + id, (res) => {
					res.html = this.parse(res.content)
					this.data = res
				}, (err) => {

				})
			},
			next() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				});
			},
			playClick(start) {
				console.log(start)
				var audio = uni.createVideoContext
				console.log(audio)
				if (start) {
					this.start = false
					this.stop();
					// audio.currentTime = 0;
				} else {
					this.start = true
					this.play();
				}
				// this.getAudio()
			},
			// 播放
			play() {
				this.stipshow = true;
				this.playshow = false;
				this.status = 2;
				this.videoContext.play();
			},
			// 暂停
			stop() {
				this.stipshow = false;
				this.playshow = true;
				this.videoContext.pause()
				this.status = 1
			},
			// 更新进度条
			timeupdate(event) {
				if (this.lock) return; // 锁
				var currentTime, duration, percent;
				if (event.detail.detail) {
					currentTime = event.detail.detail.currentTime
					duration = event.detail.detail.duration
				} else {
					currentTime = event.detail.currentTime
					duration = event.detail.duration
				}
				this.currentTime = currentTime
				this.duration = duration
				percent = (currentTime / duration) * 100
				console.log(percent)
				this.percent = percent + '%'
				if (percent >= 99) {
					this.start = false
				}
			},

			// 拖动进度条
			sliderChange(data) {
				this.videoContext.seek(data.detail.value)
			},

			//拖动中
			sliderChanging(data) {
				this.currentTime = data.detail.value
			},

			// 视频加载完成
			loadedmetadata(data) {
				this.duration = data.detail.duration
			}
		},
		computed: {
			cssProps() {
				let params = {
					'--width': this.percent
				}
				return params
			},


			timer() {

				return calcTimer(this.currentTime)
			},
			overTimer() {

				return calcTimer(this.duration)
			}
		},
	}
</script>
<style>
	.content {
		position: fixed;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: row;
		background: #eee;
	}

	.header {
		width: 100%;
		position: relative;
		display: flex;
		background: #fff;
	}

	.header .background {
		width: 100%;
		height: auto;
		margin-bottom: 10rpx;
	}

	.header .btn_pre {
		position: absolute;
		bottom: 50rpx;
		left: calc(50% - 160rpx);
		height: 60rpx;
		width: 60rpx;
		border-radius: 30rpx;
		z-index: 9;
	}

	.header .btn-start {
		position: absolute;
		bottom: 50rpx;
		left: calc(50% - 30rpx);
		height: 60rpx;
		z-index: 9;
		width: 60rpx;
		border-radius: 30rpx;
	}

	.header .btn_next {
		position: absolute;
		bottom: 50rpx;
		right: calc(50% - 160rpx);
		height: 60rpx;
		z-index: 9;
		width: 60rpx;
		border-radius: 30rpx;
	}

	.header .line {
		width: var(--width);
		position: absolute;
		bottom: 0;
		left: 0;
		height: 10rpx;
		background: #B9AC90;
		z-index: 9;
	}

	.center {
		background: #fff;
		width: calc(100% - 80rpx);
		padding: 40rpx;
	}

	.center .title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333;
	}

	.center .info {
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #666;
	}

	.detail {
		background: #fff;
		width: calc(100% - 80rpx);
		padding: 40rpx;
		margin: 20rpx 0 80rpx 0;
	}

	.detail .title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		color: #333;
	}

	.detail text {
		display: inline-block;
		text-align: justify;
		text-indent: 2em;
		font-size: 32rpx;
		color: #666;
		line-height: 60rpx;
	}
</style>
